<script lang='ts' setup>
import { onMounted, reactive, ref, nextTick } from 'vue'
import UserList from './component/user-list.vue'
import UnitTreeCard from '/@/views/org/unit/component/unit-tree-card.vue'
import unitServiceApi from '/@/api/org/bean/unit'
import userServiceApi from '/@/api/org/bean/user-bean'
import { downloadFile } from '/@/utils/file'
import UserListSelectDialog from './component/user-list-select-dialog.vue'
import UserDeptServiceApi from '/@/api/org/bean/user-dept'
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons'

const UserListRef = ref()
const UserState = reactive({
    queryParam: { unitId: '10000', id: '10000', subOrgId: '10000' },
    loadUserTable: () => {
        UserListRef.value.getUserListTableRef().loadTable()
    },
    /**节点点击事件 */
    handleNodeClick: (treeData: ReturnTree<any>) => {
        console.log('tree', treeData)
        UserState.queryParam.unitId = treeData.id
        UserState.queryParam.id = treeData.attributes.orgId
        UserState.queryParam.subOrgId = treeData.attributes.subOrgId
        nextTick(() => UserState.loadUserTable())
    },
    onAddButtonClick: () => {
        UserListRef.value.onAddButtonClick()
    },
    onDeleteButtonClick: () => {
        UserListRef.value.onDeleteButtonClick()
    },
    // 关联用户
    onRelUserClick: () => {
        UserState.visibleDialog = true
    },
    /**
     * 关联用户弹窗是否显示
     */
    visibleDialog: false,
    // 保存成功
    saveSuccess: (pkListDta: any[]) => {
        const pkList: any[] = []
        pkListDta.forEach(e => {
            pkList.push(e.userId)
        })
        UserDeptServiceApi.associateDeptUser({ deptId: UserState.queryParam.unitId, userIds: pkList.join(',') }).then((res: any) => {
            if (res.data.success) {
                ElMessage({
                    type: 'success',
                    message: '操作成功',
                })
                UserState.visibleDialog = false
                UserState.loadUserTable()
            }
        })
    },
    //下载按钮loading
    downloadButtonLoading: false,
    //下载附件模板
    onDownloadButtonClick: (type: string, name: string) => {
        UserState.downloadButtonLoading = true
        unitServiceApi.downloadExcelTemplate(type).then(res => {
            downloadFile(`${name}.xlsx`, res.data)
        }).finally(() => {
            UserState.downloadButtonLoading = false
        })
    },
    dialogVisible: false,
    uploadExcelUrl: '',
    //导入按钮下拉点击事件
    handleCommand: (command: string | number | object) => {
        if (command == 'download-unit') {
            UserState.onDownloadButtonClick('unit', '部门导入模板')
        } else if (command == 'upload-unit') {
            UserState.uploadExcelUrl = unitServiceApi.getImportExcelUrl()
            UserState.dialogVisible = true
        } else if (command == 'download-user') {
            UserState.onDownloadButtonClick('user', '用户导入模板')
        } else if (command == 'upload-user') {
            UserState.uploadExcelUrl = userServiceApi.getImportExcelUrl()
            UserState.dialogVisible = true
        }
    },
    //上传附件
    onUploadButtonClick: (type: string) => {
        if (type == 'unit') {
            UserState.uploadExcelUrl = unitServiceApi.getImportExcelUrl()
        } else if (type == 'user') {
            UserState.uploadExcelUrl = userServiceApi.getImportExcelUrl()
        }
        UserState.dialogVisible = true
    },
    importSuccess: () => {
        UserState.loadUserTable()
    }
})
onMounted(() => UserState.loadUserTable())
</script>
<template>
    <jxtech-basic-header>
        <template #extra>
            <el-button type="primary" @click="UserState.onRelUserClick">关联用户</el-button>
            <el-dropdown style="margin: 0 10px;" @command="UserState.handleCommand">
                <el-button type="primary">
                    导入
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="download-unit">下载部门模板</el-dropdown-item>
                        <el-dropdown-item command="upload-unit">部门数据导入</el-dropdown-item>
                        <el-dropdown-item command="download-user">下载用户模板</el-dropdown-item>
                        <el-dropdown-item command="upload-user">用户数据导入</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <jxtech-add-button @click="UserState.onAddButtonClick"></jxtech-add-button>
            <jxtech-delete-button @click="UserState.onDeleteButtonClick"></jxtech-delete-button>
        </template>
    </jxtech-basic-header>
    <el-row :gutter="12">
        <el-col :span="6">
            <unit-tree-card @node-click="UserState.handleNodeClick"></unit-tree-card>
        </el-col>
        <el-col :span="18">
            <user-list ref="UserListRef" :query-param="UserState.queryParam"></user-list>
        </el-col>
    </el-row>
    <jxtech-import-dialog
        v-if="UserState.dialogVisible"
        v-model:visible="UserState.dialogVisible"
        :action="UserState.uploadExcelUrl"
        @importSuccess="UserState.importSuccess"
    ></jxtech-import-dialog>
    <user-list-select-dialog
        v-model:visible="UserState.visibleDialog"
        :unit-id="UserState.queryParam.unitId"
        @ok="UserState.saveSuccess"
    ></user-list-select-dialog>
</template>

<style scoped>
::v-deep(.el-card) {
    height: var(--jxtech-fit-height);
}
::v-deep(.el-card__body) {
    height: var(--jxtech-fit-height);
}
</style>